import React from 'react';

import {
  StyleSheet, View, Text, TouchableOpacity,
} from 'react-native';
import ZlstIcon from './zlst-icons';
import theme from '../native-base-theme/variables';

export default ({ cancel, title, confirm }) => (
  <View style={styles.root_container}>
    <TouchableOpacity style={{ padding: 10 }} onPress={cancel}>
      <ZlstIcon
        name="fanhui"
        size={24}
        color="white"
      />
    </TouchableOpacity>
    <View style={styles.title_container}>
      <Text style={styles.title}>{title}</Text>
    </View>
    <TouchableOpacity style={{ padding: 10 }} onPress={confirm}>
      <Text style={{ color: 'white' }}>确定</Text>
    </TouchableOpacity>
  </View>
);

const styles = StyleSheet.create({
  root_container: {
    paddingTop: 10,
    paddingBottom: 10,
    backgroundColor: theme.myPrimary,
    flexDirection: 'row',
    alignItems: 'center',
  },
  title_container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: theme.myTitleFontSize,
    color: 'white',
  },
});
